<template>
	<view>
		<view class="container"> 
			<view class="user-cont">
				<view class="portrait" @click="onGetUserData">
					<image :src="userInfo.avatarUrl || defaulthead"></image>
				</view>
				<view class="desc"> 
					<view class="info">
						<image v-if="userData.vip == 1" src="../../../static/huiyuan.png"></image>
						<text>{{userInfo.nickName || '点击头像授权登录'}}</text>
					</view>
					<view @click="onRenZheng" class="cu-btn radius certification shadow">{{ userData.auth == 1 ? '已认证':'未认证' }}</view>
				</view>
			</view>
			<button :plain="true" open-type="contact" class="service">
				<text style="font-size: 30rpx;" class="icon-service text-green margin-right-xs"></text>
				<text>客服</text>
			</button>
		</view>
		<view class="money">
			<view @click="onGoNext(`/pages/Mine/Balance/Balance`)">
				<text>￥{{ userData.money || '0.00' }}</text>
				<text>我的余额</text>
			</view>
			<view class="solid-left" @click="onGoNext(`/pages/Mine/AccountFrozen/AccountFrozen?freeze=${userData.freeze}`)">
				<text>￥{{ userData.freeze || '0.00' }}</text>
				<text>冻结金额</text>
			</view>
		</view>
		<view class="list">
			<block v-for="(item, index) in list" :key="index">
				<view class="item solid-bottom" @click="onGoTarget(item.url)">
					<view class="flex align-center">
						<image :src="item.icon"></image>
						<text>{{item.name}}</text>
					</view>
					<view class="icon-right"></view>
				</view>
			</block>
		</view>
		<accredit ref="showPicker" @userInfo="GetUserSuccess"></accredit>
		<view class="bottom_shadow"></view>
	</view>
</template>

<script>
import userApi from "@/Api/User.js"

export default {
	data() {
		return {
			userData: null,
			defaulthead: '../../../static/moren.jpg',
			list: [
				{
					icon: '../../../static/order.png',
					name: '我的订单（买券）',
					url: '/pages/Order/List/List'
				},{
					icon: '../../../static/jiaoyi.png',
					name: '我的交易（卖券）',
					url: '/pages/Deal/List/List'
				},{
					icon: '../../../static/renzhengguanli.png',
					name: '认证中心',
					url: '/pages/Column/Attestation/Attestation'
				},{
					icon: '../../../static/help.png',
					name: '帮助中心',
					url: '/pages/Column/Help/Help'
				}
			]
		};
	},
	computed: {
		userAccredit() {
			return this.$store.state.userAccredit;
		},
		userInfo() {
			return this.$store.state.userInfo;
		}
	}, 
	onShow() {
		this.getAjaxUserData()
	},
	methods: {
		getAjaxUserData() {
			userApi.getUserData(1)
				.then(res=> this.userData = res)
		},
		onGetUserData() {
			console.log(this.userAccredit)
			if (this.userAccredit) {
				 this.$refs.showPicker.show()
			} else {
				uni.getUserInfo({
					success:(data)=>{
						this.$store.commit('setUserInfo', {
							nickName: data.userInfo.nickName,
							avatarUrl: data.userInfo.avatarUrl
						})
						userApi.userinfo(data)
							.then((res)=> console.log(res))
					}
				})
			}
		},
		// 微信用户授权方法回调
		GetUserSuccess(e) {
			this.$refs.showPicker.close();
			this.getAjaxUserData()
		},
		onGoTarget(url) {
			this.onGoNext(url)
		},
		onGoNext(url) {
			uni.navigateTo({ url })
		},
		onRenZheng() {
			this.onGoNext(`/pages/Column/Attestation/Attestation`)
		}
	},
	onShareAppMessage() {
		let { nickName, id } = this.userInfo
		return {
			title: `${nickName}发现了一个好东西跟你分享`,
			path: id ? `/pages/Tab/BuyTicket/BuyTicket?userid=${id}` : '/pages/Tab/BuyTicket/BuyTicket',
			imageUrl: '/static/share.png'
		}
	}
};
</script>

<style lang="scss">
page {
	background: #fff;
}
.container {
	position: relative;
	overflow: hidden;
	padding-top: 60upx;
	height: 350upx;
	&::before {
		content: '';
		position: absolute;
		width: 1000upx;
		top: -180upx;
		right: -16%;
		height: 530upx;
		background: #49CD82;
		border-radius: 50% / 50%;
		z-index: -1;
	}
	.user-cont{
		margin-left: 40upx;
		display: flex;
		align-items: center;
		.portrait{ 
			width: 130upx;
			height: 130upx;
			border: 5upx solid #fff;
			overflow: hidden;
			border-radius: 50%;
			> image{
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}
		.desc{
			margin-left: 40upx;
			.info{
				margin-bottom: 17upx;
				display: flex;
				align-items: center;
				font-size: 36upx;
				color: #FFFFFF;
				line-height: 50upx;
				image{
					width: 35upx;
					height: 32upx;
					margin-right: 10upx;
				}
			}
			.certification{
				width: 122upx;
				height: 42upx;
				padding: 0;
				line-height: 42upx;
				background: #FFBD00;
				border-radius: 12upx;
				font-size: 24upx;
				color: #fff;
			}
		}
	}
	.service{
		padding: 0;
		position: absolute;
		z-index: 1;
		top: 0;
		right: 0;
		width: 161upx;
		height: 68upx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28upx;
		color: #49CD82;
		background: #FFFFFF;
		box-shadow: 0 5upx 30upx 0 rgba(252,78,17,0.20);
		border-radius: 100upx 0 0 100upx;
		border: none;
		::after{
			border: 0;
		}
		> image{
			width: 35upx;
			height: 35upx;
			margin-right: 20upx;
			background-color: #eee;
		}
	}
}
.money{
	margin: 0 50upx;
	margin-top: -110upx;
	background-color: #fff;
	height: 185upx;
	border-radius: 20upx;
	display: flex;
	align-items: center;
	position: relative;
	&::after{
		position: absolute;
		content: '';
		width: 95%;
		height: 95%;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #eee;
		z-index: -1;
		margin: auto;
		box-shadow: 0 8upx 30upx 0 rgba(0,0,0,.06);
	}
	> view{
		flex: 1;
		text-align: center;
		height: 100upx;
		> text {
			display: block;
			font-size: 26upx;
			color: #666666;
			height: 37upx;
			line-height: 37upx;
			&:first-child{
				font-size: 36upx;
				color: #FC4E11;
				height: 50upx;
				line-height: 50upx;
				margin-bottom: 18upx;
			}
		}
	}
}
.list{
	margin-top: 50upx;
	padding: 0 40upx;
	.item{
		height: 105upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 10upx;
		image{
			width: 45upx;
			height: 45upx;
			margin-right: 30upx;
			filter: drop-shadow(0 4upx 6upx rgba(#49CD82,.1));
		}
		.icon-right{
			color: #D8D8D8;
		}
	}
}
</style>
